import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { VolumeO } from '@react-vant/icons'
import { NoticeBar, Swiper, Empty } from 'react-vant'

import styles from './index.module.css'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const backfzkf = () => {
    navigate(-1)
  }
  const towenzhuanjias = () => {
    navigate('/wenzhuanjia')
  }
  const tomszl = () => {
    navigate('/xitong')
  }
  return (
    <div>
      {/* navbar */}
      <div className={styles.nav}>
        <div><NavBar onBack={backfzkf}>复诊开方</NavBar></div>
      </div>

      {/* 公益公告 */}

      <div className={styles.demo_notice_bar}>
        <NoticeBar leftIcon={<VolumeO />}>
          <Swiper
            autoplay={3000}
            indicator={false}
            vertical
            className={styles.notice_swipe}
          >
            <Swiper.Item>公益通告：为了更好的服务您，</Swiper.Item>
            <Swiper.Item>即日起您点击医生的“复诊开方"</Swiper.Item>
            <Swiper.Item>按钮产生的问诊费用均由平台承担！</Swiper.Item>
            <Swiper.Item>急重症患者不适合网上诊疗/咨询，请前往医院就诊</Swiper.Item>
          </Swiper>
        </NoticeBar>
      </div>

      {/* 暂无用药记录的空状态 */}
      <div style={{ width: '100%', height: '100%' }}>
        <Empty style={{ width: '100%', height: '100%' }} description="暂无用药记录" />
      </div>
      {/* 文字 */}
      <div style={{ width: '90%', height: '100%', margin: 'auto' }}>
        <p style={{ color: '#afc5fb' }}>复诊开方只面向在平台有医生开具用药记录的患者！
          您可以先根据当前病情状况找到对应擅长的医生，
          订购其图文咨询服务，
          在问诊中医生将根据您的病情描述需要开具用药建议！
          后续若还有用药需求， x
          就可以直接进入开药门诊申请复诊开方！</p>
      </div>
      {/* 按钮-知道怎么找医生 */}
      <div style={{ width: '100%', height: '100%', textAlign: 'center', marginTop: '20px', marginBottom: '20px' }}>
        <p style={{ textAlign: 'center' }}>知道怎么找医生</p>
        <button style={{ width: '90%', height: '40px', borderRadius: '5px', backgroundColor: '#51b18b', color: '#fff', border: 'none', textAlign: 'center', margin: '0 auto' }} onClick={towenzhuanjias}>立即咨询</button>
      </div>
      {/* 按钮-不知道怎么找医生 */}
      <div style={{ width: '100%', height: '90px', textAlign: 'center' }}>
        <p style={{ textAlign: 'center' }}>不知道怎么找医生</p>
        <button style={{ width: '90%', height: '40px', borderRadius: '5px', backgroundColor: '#eff4fe', color: '#386df6', border: 'none', marginLeft: '20px', margin: '0 auto', textAlign: 'center' }} onClick={tomszl}>联系妙手助理</button>
      </div>
    </div>
  )
}

export default Index